<template>
  <div class="w-full flex overauto">
    <div
      v-for="(item, index) in list"
      :key="index"
      class="px-[10px] py-[16px] mr-[20px] mb-[20px] bg-[#F4F4F5] rounded-[4px]"
      v-hasPermi="[item.flag ? `oce:advertiserEverydayCost:${getFirstLetter(item.desc)}` : '*:*:*']"
    >
      <div class="text-[14px] text-[#606266] mb-[10px] text-no-wrap">{{ item.desc }}</div>
      <div v-if="item.desc === '总时速' && show" class="cursor-pointer">
        <span @click="clickEmit('ss')" class="text-[#ff0000] mr-[5px]" v-hasPermi="['oce:everydayCostHours:listHoursTotal']">{{ item.type }}</span>
        <span @click="clickEmit('qs')" class="text-[--el-color-primary]" v-hasPermi="['oce:everydayCostHours:listCost']">(趋势)</span>
      </div>
      <div v-else class="text-[#ff0000]">
        {{ item.type }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getFirstLetter } from '@/utils';

interface ListItem {
  desc: string;
  type: number;
}
defineProps({
  list: {
    type: Array as PropType<ListItem[]>,
    default: () => [] as ListItem[],
    required: true
  },
  show: {
    type: Boolean,
    default: false
  }
});
const emit = defineEmits(['liseViewChange']);

const clickEmit = (value) => {
  emit('liseViewChange', value);
};
</script>

<style lang="less" scoped>
.w-full {
  overflow: auto;
}
</style>
